<template>
  <div>
    <!--查询区域-->

    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" :disabled="addBtnDisabled" preIcon="ant-design:plus-outlined"> 添加用户</a-button>
      </template>
      <!--操作栏-->
      <template #action="{ record }" v-if="!addBtnDisabled">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>

      <!--操作权限插槽-->
      <template #optAuthSlot="{ record }">
        <a-badge v-if="record.businessOptAuth===1" color="green" :text="record.businessOptAuth_dictText" />
        <a-badge v-if="record.businessOptAuth===2" color="red" :text="record.businessOptAuth_dictText" />
      </template>

    </BasicTable>
    <!-- 表单区域 -->
    <CaishuiBusinessUserModal ref="registerModal" @success="handleSuccess"></CaishuiBusinessUserModal>
    <!--修改密码-->
    <PasswordModal @register="registerPasswordModal" @success="reload" />
  </div>
</template>

<script lang="ts" name="caishuiBusinessUser-caishuiBusinessUser" setup>
import { reactive, ref, watchEffect } from "vue";
import { BasicTable, TableAction } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { columns } from "./CaishuiBusinessUser.data";
import { list, deleteUser } from "./CaishuiBusinessUser.api";
import CaishuiBusinessUserModal from "./components/CaishuiBusinessUserModal.vue";
import PasswordModal from '/@/views/system/user/PasswordModal.vue';
import { useModal } from "/@/components/Modal";

const queryParam = ref<any>({});
  const registerModal = ref();
  const exportIconLoading = ref<boolean>(false);
  const addBtnDisabled = ref<boolean>(true);

  const props = defineProps({
    formDisabled:{
      type: Boolean,
      default: false
    },
    businessInfo:{
      type: Object,
      default: null
    },
  })

  // businessId数据改变
  watchEffect(() => {
    let id = "0";
    if(props.businessInfo && props.businessInfo.id && props.businessInfo.id != '0'){
      id = props.businessInfo.id
    }
    queryParam.value.businessId = id;
    if(id && id != '0'){
      addBtnDisabled.value = false;
    }else {
      addBtnDisabled.value = true;
    }
    if (props.formDisabled){
      addBtnDisabled.value = true;
    }
  });

  //密码model
  const [registerPasswordModal, { openModal: openPasswordModal }] = useModal();
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '商户用户信息表',
      api: list,
      columns,
      canResize:false,
      useSearchForm: false,
      striped: true,
      showIndexColumn: false,
      immediate: false,//首次加载页面不加载列表数据
      actionColumn: {
        width: 150,
        fixed: 'right',
      },
      //自定义默认排序
      defSort: {
        column: 'id',
        order: 'desc',
      },
      beforeFetch: (params) => {
        return Object.assign(params, queryParam.value);
      },
    },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
  const labelCol = reactive({
    xs: { span: 24 },
    sm: { span: 7 },
  });
  const wrapperCol = reactive({
    xs: { span: 24 },
    sm: { span: 16 },
  });

  /**
   * 新增事件
   */
  function handleAdd() {
    registerModal.value.disableSubmit = false;
    registerModal.value.add({businessId: props.businessInfo.id});
  }
  
  /**
   * 编辑事件
   */
  function handleEdit(record: Recordable) {
    registerModal.value.disableSubmit = false;
    registerModal.value.edit(record);
  }
   
  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    registerModal.value.disableSubmit = true;
    registerModal.value.edit(record);
  }
   
  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteUser({ id: record.id }, handleSuccess);
  }

  /**
   * 打开修改密码弹窗
   */
  function handleChangePassword(username) {
    openPasswordModal(true, { username });
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    (selectedRowKeys.value = []) && reload();
  }
   
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '编辑',
        icon: 'ant-design:edit-outlined',
        onClick: handleEdit.bind(null, record),
      },
    ];
  }
   
  /**
   * 下拉操作栏
   */
  function getDropDownAction(record) {
    return [
      {
        label: '密码',
        icon: 'ant-design:key-outlined',
        onClick: handleChangePassword.bind(null, record.phone),
      }, {
        label: '移除',
        icon: 'ant-design:minus-circle-outlined',
        popConfirm: {
          title: '是否确认移除？',
          confirm: handleDelete.bind(null, record),
        }
      }
    ]
  }

  /**
   * 查询
   */
  const searchQuery = () => {
    reload();
  }
  
  /**
   * 重置
   */
  function searchReset() {
    queryParam.value = {};
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }

  // 将这个方法暴露出去,这样父组件就可以使用了
  defineExpose({
    searchQuery,
  })
</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    margin-bottom: -10px;
    .table-page-search-submitButtons {
      display: block;
      white-space: nowrap;
    }
    .query-group-cust{
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
  }
</style>
